<template>
    <div class="container">
        <div class="stat">
            <div class="content">
                <div class="left">
                    <div class="item">
                        <span class="head">净化设备状况</span>
                        <span>&nbsp;</span>
                    </div>
                    <div class="item">
                        <span>规范</span>
                        <span class="data">{{ stat.qual }}</span>
                    </div>
                    <div class="item">
                        <span>待排查</span>
                        <span class="data">{{ stat.rectify }}</span>
                    </div>
                    <div class="item">
                        <span>待整改</span>
                        <span class="data">{{ stat.audit }}</span>
                    </div>
                </div>
                <div class="right">
                    <dv-active-ring-chart class="chart" :config="config" />
                </div>
            </div>
            <labelTag :config="labelConfig" />
        </div>
        <div class="title">
            <span>{{ stat.areaName }}</span>
            <!-- <dv-decoration-9 style="width: 200px; height: 200px"> -->
            <span class="total">{{ stat.total }}</span>
            <!-- </dv-decoration-9> -->
            <!-- <span class="total"></span> -->
        </div>
        <div class="stat">
            <div class="content">
                <div class="left">
                    <div class="item">
                        <span class="head">设备清洗状况</span>
                        <span>&nbsp;</span>
                    </div>
                    <div class="item">
                        <span>规范</span>
                        <span class="data">{{ devopsStat.qual }}</span>
                    </div>
                    <!-- <div class="item">
                        <span>超时</span>
                        <span class="data">{{ devopsStat.timeout }}</span>
                    </div> -->
                    <div class="item">
                        <span>待规范</span>
                        <span class="data">{{ devopsStat.nodevops }}</span>
                    </div>
                </div>
                <div class="right">
                    <dv-active-ring-chart class="chart" :config="devopsConfig" />
                </div>
            </div>
            <labelTag :config="devopsLabelConfig" />
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch, nextTick } from 'vue'
import labelTag from '../labelTag'
import http from '@/utils/http'
import * as util from '@/utils/util'
import { ElMessage } from 'element-plus'

onMounted(async () => {
    await getData()
    nextTick(() => {
        emits('finish')
    })
})

// 监听窗口大小变化事件
window.addEventListener('resize', function () {})

const props = defineProps(['areaId'])
const emits = defineEmits(['finish'])

watch(
    () => props.areaId,
    (newVal, oldVal) => {
        if (newVal !== oldVal) {
            getData()
        }
    },
    {
        //不立即执行回调函数
        immediate: false,
        deep: true,
    }
)

//获取统计数据
const getData = async () => {
    var cid = util.GetQueryParam('cid')
    var area = util.GetQueryParam('area')

    var res = await http.get(
        `getcompanystat?area=${props.areaId ? props.areaId : area ? area : ''}&category=${
            cid ? cid : ''
        }`
    )
    if (res.status === 0) {
        let data = res.data
        stat.value.areaName = data.AreaName
        stat.value.total = data.Total
        stat.value.rectify = data.Rectify
        stat.value.audit = data.Improve
        stat.value.qual = data.Qualified + data.Improved

        config.value = {
            data: [
                {
                    name: '规范',
                    value: stat.value.qual,
                },
                {
                    name: '待排查',
                    value: stat.value.rectify,
                },
                {
                    name: '待整改',
                    value: stat.value.audit,
                },
            ],
            digitalFlopStyle: {
                fontSize: 15,
                fill: '#fff',
            },
            color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
            lineWidth: 30,
            radius: '55%',
            activeRadius: '60%',
        }

        devopsStat.value.qual = data.Devopsed
        devopsStat.value.timeout = data.Timeouted
        devopsStat.value.nodevops = data.NoDevops

        devopsConfig.value = {
            data: [
                {
                    name: '规范',
                    value: devopsStat.value.qual,
                },
                // {
                //     name: '超时',
                //     value: devopsStat.value.timeout,
                // },
                {
                    name: '待规范',
                    value: devopsStat.value.nodevops,
                },
            ],
            digitalFlopStyle: {
                fontSize: 15,
                fill: '#fff',
            },
            color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
            lineWidth: 30,
            radius: '55%',
            activeRadius: '60%',
        }
    } else {
        console.log(res)
        ElMessage(res.msg)
    }
}

const config = ref()
const devopsConfig = ref()

const stat = ref({
    total: 0,
    placeName: '',
    qual: 0,
    rectify: 0,
    audit: 0,
})

const devopsStat = ref({
    qual: 0,
    timeout: 0,
    nodevops: 0,
})

const labelConfig = ref({
    data: ['规范', '待排查', '待整改'],
})

const devopsLabelConfig = ref({
    data: ['规范', '待规范'],
    //data: ['规范', '超时', '无记录'],
})
</script>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;

    .title {
        width: 30%;
        height: 100%;
        font-size: 45px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span.total {
            color: #096dd9;
            font-weight: bold;
            font-size: 70px;
            //margin-top: 35px;
        }
    }

    .stat {
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .content {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            height: calc(100% - 10px);

            .left {
                width: 45%;
                font-size: 20px;
                color: #fff;
                padding: 5px;

                .item {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    padding: 2px 0;

                    span.head {
                        font-size: 24px;
                        font-weight: bolder;
                        padding: 0 0 4px 0;
                        color: #096dd9;
                        margin-bottom: 10px;
                    }
                    span.data {
                        font-weight: 800;
                        color: #096dd9;
                    }
                }
            }

            .right {
                width: 55%;
                height: 100%;

                .chart {
                    width: 100%;
                    height: 100%;

                    :deep(.active-ring-name) {
                        font-size: 14px !important;
                    }
                }
            }
        }
    }
}
</style>
